<template>
  <li>
    <div :class="{'li-wrapper':true,'li-wrapper-select':selected}" :style="config.style" @click="$emit('click')">
      <Icon :class="{'arrow':true,'arrow-hidden':!arrow}" :type="show?'ios-arrow-down':'ios-arrow-forward'"  @click.self="show=!show"/>
        <div slot="title" class="item-wrapper">
          <Icon v-if="!!config.icon" :type="config.icon" :class="['item-icon']" :style="config.iconStyle"/>
          <span v-if="!!config.title" :class="['item-title']" :style="config.titleStyle">
            {{G_PickText(config.title)}}
          </span>
          <slot name="title"></slot>
      </div>
    </div>
    <div :class="{'item-children-hidden':!show,'item-children':true}">
      <slot></slot>
    </div>
  </li>
</template>

<script>
export default {
  name:'AtomLi',
  components: {},
  data() {
    return {
        show: true,
    };
  },
  props: {
    arrow:{
      default:()=>{
        return false
      }
    },
    selected:{
      default:()=>{
        return false
      }
    },
    config:{
      default:()=>{
        return {
          icon:'',
          iconStyle:{},
          title:'',
          titleStyle:{},
          style:{}
        }
      }
    }
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    
  },
  methods:{
    G_PickText(text){
      if(!text) return '';
      if(!!text&&(!!text[this.G_Locale]||text[this.G_Locale]=='')){
        return text[this.G_Locale]
      }else{
        return text;
      }
    },
  }
};
</script>
<style scoped lang="scss">
 .li-wrapper {
  display:flex;
  align-items: center;
  list-style-type:none;
  :hover {
    background-color: rgb(243 244 246);
  }
 }
.li-wrapper-select {
  background-color: rgb(241 245 249);
 }
 .arrow {
  margin:0px 2px;
 }
 .arrow-hidden {
  visibility: hidden;
 }
 .item-wrapper {
  display: flex;
  position: relative;
  width:100%;
  align-items: center;
  overflow: hidden;
  padding:1px;
  padding-right:4px;
  flex:1 1 0%;
  cursor: default;
 }
 .item-icon {
  margin-right: 4px;
 }
 .item-title {
  display: flex;
  flex:1 1 auto;
  padding-right:2px;
 }
 .item-children {
  padding-left:14px;
 }
 .item-children-hidden {
  display: none;
 }
</style>